<script setup lang="ts">
import { useRole } from "./utils/hook";
import ReCol from "@/components/ReCol";

defineOptions({
  name: "Question"
});

const {
  isPracticingQuestions,
  questionTypeRef,
  handleTypeChange,
  questionDataList,
  onPreQuestion,
  onNextQuestion,
  currentAnswerIdRef,
  currentAnswerRef,
  formExamData,
  showIdRef,
  showMumber
} = useRole();

function changeStyle(item, showId) {
  const index = questionDataList.value.indexOf(item);
  currentAnswerRef.value = index;
  showIdRef.value = showMumber(showId);
}

//去除富文本中的p标签
function delHtmlTag(str) {
  return str.replace(/<(\/)?p>/g, "");
}
</script>
<template>
  <div>
    <el-card v-if="isPracticingQuestions">
      <el-row :gutter="30" class="no-copy">
        <re-col :value="6" :xs="24" :sm="24">
          <el-card>
            <template #header>
              <el-radio-group
                v-model="questionTypeRef"
                @change="handleTypeChange"
              >
                <el-radio :label="0">判读题</el-radio>
                <el-radio :label="1">单选题 </el-radio>
                <el-radio :label="2">多选题 </el-radio>
                <el-radio :label="3">案例分析</el-radio>
              </el-radio-group>
            </template>
            <el-space
              style="padding-bottom: 8px"
              v-for="(item, index) in questionDataList"
              :key="index"
            >
              <el-button
                :type="
                  currentAnswerIdRef == item.id
                    ? 'danger'
                    : 'answer' in item
                    ? 'info'
                    : ''
                "
                @click="changeStyle(item, index)"
                style="line-height: 1.5"
              >
                {{ showMumber(index) }}
              </el-button>
            </el-space>
          </el-card>
        </re-col>
        <re-col :value="12" :xs="24" :sm="24">
          <el-card>
            <template #header>
              <div class="w-full flex justify-between">
                <el-button type="info" size="large" @click="onPreQuestion"
                  >上一题</el-button
                >
                <el-button type="info" size="large" @click="onNextQuestion"
                  >下一题</el-button
                >
              </div>
            </template>
            <div style="height: 65vh; overflow-x: hidden; overflow-y: auto">
              <el-form :model="formExamData">
                <el-form-item
                  style="font-weight: bold"
                  v-if="formExamData.type == 0"
                  >(判断题)**<span
                    >第{{ showIdRef }}题({{ formExamData.score }}分)：</span
                  ></el-form-item
                >
                <el-form-item
                  style="font-weight: bold"
                  v-if="formExamData.type == 1"
                  >(单选题)**<span
                    >第{{ showIdRef }}题({{ formExamData.score }}分)：</span
                  ></el-form-item
                >
                <el-form-item
                  style="font-weight: bold"
                  v-if="formExamData.type == 2"
                  >(多选题)**<span
                    >第{{ showIdRef }}题({{ formExamData.score }}分)：</span
                  ></el-form-item
                >
                <el-form-item
                  style="font-weight: bold"
                  v-if="formExamData.type == 3"
                  >(案例分析)**<span
                    >第{{ showIdRef }}题({{ formExamData.score }}分)：</span
                  ></el-form-item
                >
                <el-form-item>
                  <span v-html="formExamData.title" />
                </el-form-item>
                <el-form-item v-if="formExamData.childTitle">
                  <span>（{{ formExamData.childIndex }}）</span>
                  <span v-html="formExamData.childTitle" />
                </el-form-item>
                <el-form-item>
                  <el-radio-group
                    v-model="formExamData.answer"
                    :disabled="true"
                    v-if="formExamData.type == 0 || formExamData.childType == 0"
                  >
                    <el-radio :label="1">正确</el-radio>
                    <el-radio :label="0">错误</el-radio>
                  </el-radio-group>
                  <el-radio-group
                    v-model="formExamData.answer"
                    :disabled="true"
                    v-if="formExamData.type == 1 || formExamData.childType == 1"
                  >
                    <el-row :gutter="30">
                      <re-col
                        :value="24"
                        :xs="24"
                        :sm="24"
                        class="el-col-padding"
                        v-for="(item, index) in formExamData.choiceList"
                        :key="index"
                      >
                        <el-radio :label="item.name"
                          >{{ item.name }}、<span
                            v-html="delHtmlTag(item.content)"
                          />
                        </el-radio>
                      </re-col>
                    </el-row>
                  </el-radio-group>
                  <el-checkbox-group
                    v-model="formExamData.answer"
                    :disabled="true"
                    v-if="formExamData.type == 2 || formExamData.childType == 2"
                  >
                    <el-row :gutter="30">
                      <re-col
                        :value="24"
                        :xs="24"
                        :sm="24"
                        class="el-col-padding"
                        v-for="(item, index) in formExamData.choiceList"
                        :key="index"
                      >
                        <el-checkbox :label="item.name"
                          >{{ item.name }}、<span
                            v-html="delHtmlTag(item.content)"
                        /></el-checkbox>
                      </re-col>
                    </el-row>
                  </el-checkbox-group>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </re-col>
        <re-col :value="6" :xs="24" :sm="24">
          <el-card>
            <template #header>
              <div class="flex flex-row justify-start">题目解析</div>
            </template>
            <div>{{ formExamData.description }}</div>
          </el-card>
        </re-col>
      </el-row>
    </el-card>
  </div>
</template>
<style scoped lang="scss">
:deep(.el-radio__input.is-disabled + .el-radio__label) {
  color: #5a5a5a !important;
}

:deep(.el-radio__input.is-disabled.is-checked + .el-radio__label) {
  color: green !important;
}

:deep(.el-radio__input.is-disabled.is-checked .el-radio__inner) {
  background-color: green !important;
  border-color: green !important;
}

:deep(.el-checkbox__input.is-disabled + .el-checkbox__label) {
  color: #5a5a5a !important;
}

:deep(.el-checkbox__input.is-disabled.is-checked + .el-checkbox__label) {
  color: green !important;
}

:deep(.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner) {
  background-color: green !important;
  border-color: green !important;
}

:deep(.el-radio__label) {
  width: 100% !important;
  line-height: 18px;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: normal;
}

:deep(.el-checkbox__label) {
  display: inline-block;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: normal;
  vertical-align: middle;
}

.el-col-padding {
  padding-bottom: 20px;
}
</style>
